import { Form, Input } from "antd"
import React from "react"

import { FlexContainer } from "./queryForm.styled"
import { InputRangeProps } from "./type"

const InputRange: React.FC<InputRangeProps> = ({ childName, childPlaceholder }) => {
	return (
		<FlexContainer>
			<Form.Item name={childName?.[0]} style={{ width: 120 }}>
				<Input placeholder={childPlaceholder?.[0]} />
			</Form.Item>
			<Form.Item>
				<span>-</span>
			</Form.Item>
			<Form.Item name={childName?.[1]} style={{ width: 120 }}>
				<Input placeholder={childPlaceholder?.[1]} />
			</Form.Item>
		</FlexContainer>
	)
}

export default InputRange
